<template>
  <span class="type-card flex items-center cursor-pointer" :class="{ active: dataItem.active }" :id="dataItem.id" @click="handleClick">
    {{ dataItem.title }}
  </span>
</template>

<script>
export default {
  name: 'card-category',
  props: {
    dataItem: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    handleClick() {
      const payload = this.dataItem
      this.$store.commit('mind/setNodesActive', { payload })
    }
  }
}
</script>

<style lang="scss" scoped>
.type-card {
  width: fit-content;
  background: #ebf0f5;
  padding: 10px 16px;
  font-size: 16px;
  color: #333;
  border: 1px solid #d3dfeb;
  box-shadow: 0 8px 16px 1px rgba(11, 45, 97, 0.16);
  border-radius: 4px 4px 4px 4px;
  &.active {
    color: #fff;
    background: #3d82ea;
    border: 1px solid #3d82ea;
  }
}
</style>
